<template>
  <div class="card">
    <h3>多文件上传</h3>
    <section class="upload_box" id="upload5">
      <input
        ref="inputRef"
        type="file"
        class="upload_inp"
        multiple
        @change="changeFile"
      />
      <div class="upload_button_box">
        <button
          class="upload_button select"
          :class="[loading ? 'disable' : '']"
          @click="selectFile"
        >
          选择文件
        </button>
        <button
          class="upload_button upload"
          :class="[loading ? 'loading' : '']"
          @click="uploadFile"
        >
          上传到服务器
        </button>
      </div>
      <ul class="upload_list">
        <li v-for="item in filelist" :key="item.file.name">
          <span>文件名：{{ item.file.name }}</span>
          <em @click="deleteFile(item)">移除</em>
          <img v-if="item.url" :src="item.url" alt="" />
          <div class="upload_progress" v-if="item.progressLen">
            <div class="value" :style="{ width: item.progressLen }"></div>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import { useUploadSingle } from "@/hook";
let {
  inputRef,
  loading,
  filelist,
  selectFile,
  changeFile,
  uploadFile,
  deleteFile,
} = useUploadSingle({
  multiple: true,
  preview: true,
  isProgress: true,
});
console.log(filelist);
</script>

<style>
.upload_list li {
  margin-bottom: 10px;
}
.upload_list {
  display: block !important;
}
.upload_list img {
  display: block;
  max-width: 100%;
}

.upload_list span,
.upload_list em {
  font-size: 14px;
  vertical-align: middle;
}

.upload_list em {
  font-style: normal;
  cursor: pointer;
}
.upload_progress {
  display: block !important;
}
</style>
